<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
</head>
<body>

<!--
   props 接收参数的类型
   1、 简单类型  string  number  boolean
   2. 对象  object
   3. 数组   array
-->
<div id="app">
     <blog-title :blog="blog" :arr="arr"></blog-title>
</div>

<script>
    // 博客组件
    const blogTitle = {
        template: `
           <div>
             <h2>{{ blog.title }} :{{ blog.author }}</h2>
             <p v-for="num in arr">{{num}}</p>
           </div>
        `,
        props: ['blog','arr']
    }
    let vm = new Vue({
        el:'#app',
        data:{
            blog:{
                title:'第一篇博客',
                author: 'tom'
            },
            arr:[1,2,3,4]
        },
        methods:{},
        components: {
            'blog-title': blogTitle
        },
      })
</script>

</body>
</html>
